<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>服务单信息</span>
        <el-button style="float: right;" size="mini" @click="fanhui()">返回</el-button>
      </div>
      <div>
        <el-row>
          <el-col :span="5">
            <div class="biaotidiv">服务单号</div>
          </el-col>
          <el-col :span="18">
            <div class="neirondiv">
              <span>{{returnOrder.id}}</span>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5">
            <div class="biaotidiv">申请状态</div>
          </el-col>
          <el-col :span="18">
            <div class="neirondiv">
              <span v-if="returnOrder.status==='0'">已申请</span>
              <span v-if="returnOrder.status==='1'">已完成</span>
              <span v-if="returnOrder.status==='2'">已拒绝</span>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5">
            <div class="biaotidiv">订单编号</div>
          </el-col>
          <el-col :span="18">
            <div class="neirondiv">
              <span>{{order.id}}</span>&nbsp;
              <a href="script:void(0)" @click="ddxianqin(order.id)">查看</a>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5">
            <div class="biaotidiv">申请时间</div>
          </el-col>
          <el-col :span="18">
            <div class="neirondiv">
              <span>{{returnOrder.applyTime}}</span>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5">
            <div class="biaotidiv">用户账号</div>
          </el-col>
          <el-col :span="18">
            <div class="neirondiv">
              <span>{{returnOrder.userAccount}}</span>
            </div>
          </el-col>
        </el-row>
        <br />
        <br />
        <el-row>
          <el-col :span="5">
            <div class="biaotidiv">订单金额</div>
          </el-col>
          <el-col :span="18">
            <div class="neirondiv">
              <a>¥{{(order.payMoney/100).toFixed(2)}}</a>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5">
            <div class="biaotidiv">确认退款金额</div>
          </el-col>
          <el-col :span="18">
            <div class="neirondiv">
              <a>¥{{(returnOrder.returnMoney/100).toFixed(2)}}</a>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5">
            <div class="biaotidiv">退款原因</div>
          </el-col>
          <el-col :span="18">
            <div class="neirondiv">
              <span v-if="returnOrder.returnCause===0">取消订单</span>
              <span>{{returnCause}}</span>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5">
            <div class="biaotidiv">问题描述</div>
          </el-col>
          <el-col :span="18">
            <div class="neirondiv">
              <span>{{returnOrder.description}}</span>
            </div>
          </el-col>
        </el-row>
        <br />
        <br />
        <el-row v-if="returnOrder.status==='1' || returnOrder.status==='2'">
          <el-col :span="5">
            <div class="biaotidiv">处理人员</div>
          </el-col>
          <el-col :span="18">
            <div class="neirondiv">
              <span v-if="returnOrder.adminId===null">Admin</span>
              <span>{{returnOrder.adminId}}</span>
            </div>
          </el-col>
        </el-row>
        <el-row v-if="returnOrder.status==='1' || returnOrder.status==='2'">
          <el-col :span="5">
            <div class="biaotidiv">处理时间</div>
          </el-col>
          <el-col :span="18">
            <div class="neirondiv">
              <span>{{returnOrder.disposeTime}}</span>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5">
            <div class="biaotidiv">操作备注</div>
          </el-col>
          <el-col :span="18" v-if="returnOrder.status==='0'">
            <div class="neirondiv">
              <el-input v-model="returnOrder.remark" style="width: 500px"></el-input>
            </div>
          </el-col>
          <el-col :span="18" v-else>
            <div class="neirondiv">
              <span>{{returnOrder.remark}}</span>
            </div>
          </el-col>
        </el-row>
        <el-row style="margin-top: 20px;" :gutter="40" v-if="returnOrder.status==='0'">
          <el-col :span="12">
            <div>
              <el-button style="float: right;" type="danger" @click="jujuetuik()">拒绝退款</el-button>
            </div>
          </el-col>
          <el-col :span="12">
            <div>
              <el-button style="float: left;" type="primary" @click="querentuik()">确认退款</el-button>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  data () {
    return {
      returnId: '',
      order: {},
      returnOrder: {},
      returnCause: ''
    };
  },
  created () {
    // 取到路由带过来的参数
    this.returnId = this.$route.query.id;
    this.getReturnOrder()
  },
  methods: {
    async getReturnOrder () {
      const { data: res } = await this.$http.get(
        `vi/order/return/order/queryByReturnId/${this.returnId}`
      );
      this.returnOrder = res.data.tbReturnOrder
      this.order = res.data.order

      if (this.returnOrder.returnCause != 0) {
        const { data: resp } = await this.$http.get(
          `vi/order/return/cause/detail/${this.returnOrder.returnCause}`
        );
        this.returnCause = resp.data.tbReturnCause.cause
      }
    },
    // 拒绝退款
    async jujuetuik () {
      this.returnOrder.status = '2'
      const { data: res } = await this.$http.put(
        `vi/order/return/order/update`,
        this.returnOrder
      );
      // 提示信息
      this.$message({
        type: "info",
        message: "已拒绝"
      });
      this.$router.push("/home/returnManey");
    },
    // 确认退款
    async querentuik () {
      this.returnOrder.status = '1'
      const { data: res } = await this.$http.put(
        `vi/order/return/order/update`,
        this.returnOrder
      );

      // 提示信息
      this.$message({
        type: "success",
        message: "退款成功"
      });
      this.getReturnOrder()
    },
    // 订单详情
    ddxianqin (id) {
      this.$router.push({
        query: {
          id: id
        },
        path: "/home/order/orderDetails"
      });
    },
    // 返回
    fanhui () {
      this.$router.push("/home/returnManey");
    }

  }
};
</script>
<style scoped>
.biaotidiv {
  height: 50px;
  background-color: #f3f6fc;
  text-align: center !important;
  border: 1px solid rgb(235, 238, 245);
  line-height: 50px;
  font-size: 13px;
}
.neirondiv {
  height: 50px;
  border: 1px solid rgb(235, 238, 245);
  line-height: 50px;
  font-size: 13px;
  padding-left: 10px;
}
</style>